<template>
  <div class="box">
    <div class="lssc">
      <div v-for="(item, index) in lsscList" :key="index" class="lsscitem">
        <div class="icon">
          <img :key="item.icon" :src="getUrl(item.icon)" />
        </div>
        <div class="title">
          <span class="wz">{{ item.title }}</span>
          <div class="num">
            <span class="sz">{{ item.hs }}户</span>
            <span class="dw">{{ item.rs }}人</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  statisticData: {
    type: Object,
    default: () => {}
  }
});
const lsscList = ref([]);
const initList = ref([
  {
    hs: 2,
    rs: 2,
    title: '脱贫户',
    icon: 'ghqx',
    value: 'tphs', //户数
    value1: 'tphrs' //人数
  },
  {
    hs: 2,
    rs: 2,
    title: '脱贫不稳定户',
    icon: 'ghqymj',
    value: 'tpbwdhs',
    value1: 'tpbwdhrs'
  },
  {
    hs: 2,
    rs: 2,
    title: '边缘易致贫户',
    icon: 'czrkgm',
    value: 'byyzphs',
    value1: 'byyzphrs'
  },
  {
    hs: 2,
    rs: 2,
    title: '突发严重困难户',
    icon: 'czydgm',
    value: 'tfyzknhs',
    value1: 'tfyzknhrs'
  }
]);
const getUrl = (img) => {
  return new URL(`../../../../assets/ghbj/${img}.png`, import.meta.url).href;
};
watch(
  () => props.statisticData,
  () => {
    lsscList.value = initList.value.map((v: any, idx) => {
      return {
        ...v,
        hs: props.statisticData ? props.statisticData[v.value] : 0,
        rs: props.statisticData ? props.statisticData[v.value1] : 0
      };
    });
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  padding: 10px 10px 10px 22px;
}
.lssc {
  width: 90%;
  height: 100%;
  display: flex;
  padding: 10px 0px 0px 12px;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(22, 81, 152, 0.12);
  border-radius: 2px;
  border: 1px solid #165198;
  .lsscitem {
    display: flex;
    align-items: center;
    .title {
      font-weight: 400;
      margin-left: 10px;
      display: flex;
      font-family: 'DingTalk';
      .wz {
        font-size: 24px;
        background: linear-gradient(0deg, #4ab1ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .num {
        margin-left: 8px;
        .sz {
          font-size: 26px;
          font-weight: 600;
        }
        .dw {
          font-size: 20px;
          margin-left: 4px;
        }
      }
    }
    .icon {
      width: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 26px;
    }
  }
  .lsscitem:nth-child(1) {
    .title {
      .num {
        background: linear-gradient(0deg, #ff8a00 0%, #ffcc00 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .lsscitem:nth-child(2),
  .lsscitem:nth-child(4) {
    .title {
      .num {
        background: linear-gradient(0deg, #00908e 0%, #33ff99 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .lsscitem:nth-child(3) {
    .title {
      .num {
        background: linear-gradient(-5deg, #3575f7 0%, #30c2ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .lsscitem:nth-child(5) {
    .title {
      .num {
        background: linear-gradient(269deg, #e98181 0%, #ff5932 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
